<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { useComponents } from '../../stores/counter'
import { storeToRefs } from 'pinia';
import imgs from '../../utils/icondata'
const { imgsrc } = defineProps(['imgsrc'])
const arrIMG=ref(imgs)
const centerDialogVisible = ref(false)
const formLabelWidth = '199px'

const form = reactive({
    imgsrc: '../../assets/images/Masked Beauty.png',
})
const { canvasComponents } = storeToRefs(useComponents())
const { iconPushComponents } = useComponents()
let YuanLan = () => {
    centerDialogVisible.value = true
}
</script>

<template>
    <div class="csn" @click="YuanLan">预览作品
        <el-dialog v-model="centerDialogVisible" title="Shipping address" width="500">
            <el-form :model="form">
                <el-form-item label="图片详情" :label-width="formLabelWidth">
                    <div class="charu" v-for="(item, index) in arrIMG" :key="index">
                        <img class="yj" :src="item.imgsrc" alt="" srcset="">
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped>
.csn {
    font-size: 16px;
}

.yj {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
</style>
